<template>
  <div class="tab-title-page goods_list">
    <div class="common_form_search">
      <el-form ref="searchForm" :inline="true" :model="searchForm">
        <el-form-item label="订单号">
          <el-input v-model="searchForm.order_no" placeholder="请输入订单号" clearable />
        </el-form-item>
        <el-form-item label="用户名称">
          <el-input v-model="searchForm.user_name" placeholder="请输入用户名称" clearable />
        </el-form-item>
        <el-form-item label="供应商名称">
          <el-input v-model="searchForm.shop_name" placeholder="请输入供应商" clearable />
        </el-form-item>

        <el-form-item label="租期筛选">
          <el-select v-model="searchForm.lease_term" placeholder="全部" clearable>
            <el-option v-for="item in leaseList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="实际支付日">
          <my-date-picker ref="myDatePicker_pay" />
        </el-form-item>
        <el-form-item label="起租日筛选">
          <my-date-picker ref="myDatePicker_start" />
        </el-form-item>
        <el-form-item label="结算时间筛选">
          <my-date-picker ref="myDatePicker_end" />
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="search()">查询</el-button>
          <el-button size="small" @click="reset()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-tabs v-model="activeName" class="flex-1 nav_tabs" @tab-click="handleClick">
      <el-tab-pane :label="`待结算(${count.no_settle})`" name="0" />
      <el-tab-pane :label="`已结算(${count.settled})`" name="1" />
      <el-tab-pane :label="`拒绝结算(${count.refuse_settle})`" name="2" />
    </el-tabs>
    <el-divider class="middle_divider" />
    <div class="child_page">
      <div class="flex align-center table-top-btns">
        <h5 class="flex align-center">
          <svg-icon style="margin-right: 15px" icon-class="list" :size="15" />数据列表
        </h5>
        <el-button v-if="$hasMethod('#export')" size="small" class="export-btn" icon="el-icon-upload2" @click="exportFile">导出</el-button>
      </div>
      <el-table :data="tableData" border :row-class-name="rowStyle" v-show="tableData.length > -1">
        <el-table-column fixed="left" align="center" prop="order_id" label="ID" width="80" />
        <el-table-column fixed="left" label="订单编号" width="200">
          <template slot-scope="scope">
            <el-link type="primary" :underline="false" @click="jumpOrder(scope.row.trade_no)">
              {{ scope.row.trade_no }}
              <div>({{ scope.row.order_type }})</div>
            </el-link>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="goods_title" label="商品名称" width="180" />
        <el-table-column align="center" label="期数" width="90">
          <template slot-scope="scope">
            <p class="text-ellipsis">
              {{ scope.row.which_period }}/{{ scope.row.month_total }}
            </p>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="order_time" label="租期" width="120" />
        <el-table-column align="center" prop="pay_type" label="支付方式" width="100" />
        <el-table-column align="center" prop="lease_time" label="预计扣款日" width="100" />
        <el-table-column align="center" prop="pay_time" label="实际支付日" width="100" />
        <el-table-column align="center" prop="settle_time" label="结算时间" width="100" />
        <el-table-column align="center" label="账单金额" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.rent">￥{{ scope.row.rent }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="实付金额" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.paid_rent">￥{{ scope.row.paid_rent }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="lease_status" label="支付状态" width="100" />
        <el-table-column align="center" prop="overdue_days" label="逾期天数" width="90" />
        <el-table-column align="center" label="结算租金" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.settle_amount">￥{{ scope.row.settle_amount }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="手续费" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.service_fee">￥{{ scope.row.service_fee }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="reason" label="结算原因" width="120" />
        <el-table-column label="用户信息" width="220">
          <template slot-scope="scope">
            <p>
              {{ scope.row.realname }}<span style="margin-left: 15px">{{ scope.row.mobile }}</span>
            </p>
            <el-tooltip class="item" effect="dark" :content="scope.row.address" placement="top-start">
              <p class="text-ellipsis">{{ scope.row.address }}</p>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="financing_type" label="账户类型" width="100" />
        <el-table-column fixed="right" align="center" prop="order_status" label="订单状态" width="100" />
        <el-table-column fixed="right" align="center" label="结算状态" width="100">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.settle_type_name" :type="scope.row.settle_type == 1 ? 'success' : scope.row.settle_type == 0 ? '' : 'danger'">
              {{ scope.row.settle_type_name }}
            </el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column fixed="right" align="center" label="结算时间" width="100">
			<template slot-scope="scope">
			  <span v-if="scope.row.settle_type == 1">￥{{ scope.row.settle_time }}</span>
			</template>
		</el-table-column> -->
        <el-table-column fixed="right" align="center" prop="shopname" label="供应商名称" width="110" class="text-ellipsis" />
        <el-table-column fixed="right" align="center" label="操作" width="180">
          <template slot-scope="scope">
            <el-button v-if="scope.row.settle_type == 0" type="warning" size="mini" @click="settlement(scope.row.lease_id)">结算
            </el-button>
            <el-button v-if="scope.row.settle_type == 0" type="danger" size="mini" @click="refuse(scope.row.lease_id)">拒绝
            </el-button>
            <el-button v-if="scope.row.settle_type == 2" type="danger" size="mini" @click="repeal(scope.row.lease_id)">撤销
            </el-button>
			      <!-- <p v-if="scope.row.settle_type == 1">结算时间：{{scope.row.service_time}}</p> -->
          </template>
        </el-table-column>
      </el-table>
      <custom-page ref="customPage" :total="total" @getList="getList" />
    </div>
    <settle-details ref="settleDetails" :lease-id="leaseId" />
    <refuse-settle ref="refuseSettle" :lease-id="leaseId" />
    <el-dialog title="撤销" :visible.sync="repealVisible" width="30%" center class="dialog">
      <span>确定要撤销拒绝吗?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="repealVisible = false">取 消</el-button>
        <el-button type="primary" @click="repealRefused">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { auditSettleList, cancelRefuseSettle, orderLeaseSettleExport } from '@/api/finance'
import customPage from '@/components/customPage'
import myDatePicker from '@/components/myDatePicker'
import settleDetails from './settleDetails'
import refuseSettle from './refuseSettle'
export default {
  components: { customPage, myDatePicker, settleDetails, refuseSettle },
  data() {
    return {
      searchForm: {
        order_no: '',
        user_name: '',
        shop_name: '',
        lease_term: '',
        pay_time: '',
        start_time: '',
        end_time: '',
      },
      activeName: '0',
      leaseId: '',
      count: {
        no_settle: 0,
        settled: 0,
        refuse_settle: 0
      },
      leaseList: [
        { value: 1, label: '第1期' },
        { value: 2, label: '第2期' },
        { value: 3, label: '第3期' },
        { value: 4, label: '第4期' },
        { value: 5, label: '第5期' },
        { value: 6, label: '第6期' },
        { value: 7, label: '第7期' },
        { value: 8, label: '第8期' },
        { value: 9, label: '第9期' },
        { value: 10, label: '第10期' },
        { value: 11, label: '第11期' },
        { value: 12, label: '第12期' }
      ],
      total: 0,
      tableData: [],
      repealVisible: false
    }
  },
  methods: {
    rowStyle({ row }) {
      if (row.lease_is_settle === 2) {
        return 'red-font'
      } else {
        return ''
      }
    },
    // 结算
    settlement(id) {
      this.leaseId = id
      this.$refs.settleDetails.dialogVisible = true
    },
    // 拒绝
    refuse(id) {
      this.leaseId = id
      this.$refs.refuseSettle.dialogVisible = true
    },
    // 撤销
    repeal(id) {
      this.leaseId = id
      this.repealVisible = true
    },
    repealRefused() {
      cancelRefuseSettle(this.leaseId).then((res) => {
        this.repealVisible = false
        this.getList()
      })
    },
    jumpOrder(orderId) {
      this.$router.push({ name: 'orderList', params: { orderId }})
    },
    // 获取数据
    getList(flag) {
      // flag为true, 则不刷新表格
      const { page, pageSize } = this.$refs.customPage
      if (!flag) {
        this.tableData = []
      }
      auditSettleList({
        page,
        pageSize,
        ...this.searchForm,
        settle_status: this.activeName
      }).then((res) => {
        this.tableData = res.data || []
        this.total = res.total
        for (const key in this.count) {
          this.count[key] = res.count[key]
        }
      })
    },
    // 查询
    search() {
      const pickerVal_pay = this.$refs.myDatePicker_pay.getVal()
      const pickerVal_start = this.$refs.myDatePicker_start.getVal()
      const pickerVal_end = this.$refs.myDatePicker_end.getVal()
      if (pickerVal_pay !== 'error') {
        this.searchForm.pay_time = pickerVal_pay
      }
      if (pickerVal_start !== 'error') {
        this.searchForm.start_time = pickerVal_start
      }
      if (pickerVal_end !== 'error') {
        this.searchForm.end_time = pickerVal_end
      }
      this.$refs.customPage.page = 1
      this.getList()
    },
    // 重置
    reset() {
      if (this.$refs.myDatePicker_pay) {
        this.$refs.myDatePicker_pay.reset()
      }
      if (this.$refs.myDatePicker_start) {
        this.$refs.myDatePicker_start.reset()
      }
      this.searchForm = {
        order_no: '',
        user_name: '',
        shop_name: '',
        lease_term: ''
      }
      this.getList()
    },
    handleClick(tab) {
      this.activeName = tab.name
      this.$refs.customPage.page = 1
      this.getList()
    },
    exportFile() {
      orderLeaseSettleExport({
        ...this.searchForm,
        pay_time: this.searchForm.pay_time,
        start_time: this.searchForm.start_time,
        end_time: this.searchForm.end_time,
        settle_status: this.activeName
      })
    }
  },
  mounted() {
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
.el-button--warning.is-plain {
  color: #ff9f38;
  background: #fff;
  border-color: #ff9f38;
}

.el-icon-upload2 {
  font-size: 18px;
}

.dialog {
  text-align: center;
}

.goods_info {
  .info {
    margin-left: 10px;

    p {
      color: #666666;
    }

    p:first-child {
      color: #999999;
    }
  }
}

.activity {
  line-height: 24px;

  span {
    width: 20px;
    height: 20px;
    margin-left: 10px;
  }
}

.child_page {
  padding: 30px;
}

.common_form_search {
  padding-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  background-color: #ffffff;
  border-bottom: 1px solid #eeeeee;
}
</style>
